<script setup>
import { getProductByCode } from '@/api/globalApi'
import { formatMoney } from '@/utils/globalMethod'

const tableData = ref([])
const selectedProduction = ref([])
const tableRef = ref(null)
const params = ref({
  id: '',
  ProdName: '',
  ProdSize: ''
})

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  selected: { type: Array, default: () => [] },
  showFetchAll: { type: Boolean, default: false }
})

const emits = defineEmits(['update:modelValue', 'update:selected'])

const tableColumn = ref([
  { label: '产品编号', prop: 'ProdID', width: 140 },
  { label: '产品名称', prop: 'ProdName' },
  { label: '规格型号', prop: 'ProdSize' },
  { label: '单位', prop: 'Unit', width: 80 },
  { label: '库存', prop: 'kcsl', width: 120 },
  {
    label: '单价',
    prop: 'SuggestPrice',
    width: 90,
    align: 'right',
    formatter: ({ SuggestPrice }) => formatMoney(SuggestPrice)
  }
])

const fetch = (mode = 'all') => {
  let result = tableData.value
  if (mode !== 'all') {
    if (selectedProduction.value.length === 0) {
      ElMessage.warning({ message: '请选择产品' })
      return
    }

    result = selectedProduction.value
  }

  emits('update:selected', result)
  closeDialog()
}

const rowClick = row => {
  row.selected = !row.selected
}

const getRowKeys = row => {
  return row.ProdID
}

const selectable = row => {
  return !props.selected.find(item => item.ProdID === row.ProdID)
}

const selectiOnChange = selected => {
  selectedProduction.value = selected
}

// 关闭弹窗
const closeDialog = () => {
  selectedProduction.value = []
  params.value = { id: '', ProdName: '', ProdSize: '' }
  emits('update:modelValue', false)
}

const loadData = async () => {
  const { data } = await getProductByCode(params.value)
  tableData.value = data
}

onMounted(loadData)
</script>

<template>
  <el-dialog
    :modelValue="$props.modelValue"
    title="选择产品"
    @close="closeDialog"
    @open="loadData"
    class="select-customer-dialog"
  >
    <el-row class="search-bar" :gutter="10">
      <el-col :span="7">
        <el-input v-model="params.id" placeholder="请输入产品编号" />
      </el-col>

      <el-col :span="7">
        <el-input v-model="params.ProdName" placeholder="请输入产品名称" />
      </el-col>

      <el-col :span="7">
        <el-input v-model="params.ProdSize" placeholder="请输入规格型号" />
      </el-col>

      <el-col :span="2">
        <el-button type="primary" plain @click="loadData">载入</el-button>
      </el-col>
    </el-row>

    <ps-table
      :data="tableData"
      :tableColumn="tableColumn"
      @row-click="rowClick"
      :pageSize="10"
      @selection-change="selectiOnChange"
      :row-key="getRowKeys"
      ref="tableRef"
    >
      <template #header>
        <el-table-column type="selection" width="55" reserve-selection :selectable="selectable" />
      </template>
    </ps-table>

    <template #footer>
      <el-button type="primary" @click="fetch('all')" v-if="props.showFetchAll">全部取回</el-button>
      <el-button type="primary" @click="fetch('part')">勾选取回</el-button>
      <el-button @click="emits('update:modelValue', false)">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.search-bar {
  margin-bottom: 20px;
}
</style>
